<template>
	<view>
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap">
			<view style="background: #fff; padding: 40rpx">
				<block v-if="hasLogin === false">
					<view class="uni-h3 uni-center uni-common-mt">未登录</view>
					<view class="uni-hello-text uni-center">请点击按钮登录</view>
				</block>
			</view>
			<view>
				<block>{{ msg }}</block>
			</view>
		</view>
		<view class="uni-btn-v uni- uni-common-mt">
			<button type="primary" class="page-body-button" @click="tologin" :loading="loading">微信一键登录</button>
		</view>
	</view>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'

const univerifyInfoKey = 'univerifyInfo';

export default {
	data() {
		return {
			title: 'login',
			loading: false,
			msg: ''
		};
	},
	computed: {
		...mapState(['hasLogin'])
	},
	methods: {
		...mapMutations(['login']),
		tologin() {
			this.loading = true
			uni.login({
				success: ({authResult, code, appleInfo, errMsg}) => {
					// 根据code请求服务器获取用户信息
					uni.request({
						url: '自己服务器地址/login',
						data: {
							code
						},
						method: 'POST',
						success: ({data}) => {
							const { openid } = data
							uni.showToast({
								title: `登录成功`
							})
							this.login(openid)
							uni.redirectTo({
								url: '/pages/index/index',
							})
						},
						fail: (err) => {
							uni.showToast({
								title: `登录失败`,
								icon: 'error'
							})
							this.msg = err
						}
					})
				},
				fail: ({authResult, code, appleInfo, errMsg}) => {
					uni.showToast({
						title: `网络异常`,
						icon: 'error'
					})
				},
				complete: () => {
					this.loading = false
				}
			})
		}
	}
};
</script>

<style>
button {
	background-color: #007aff;
	color: #ffffff;
}
</style>
